<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>(゜-゜)つロ 干杯~</title>
	<!-- <link rel="stylesheet" href="css/bootstrap.min.css"> -->
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/main.css">
	<link rel="icon" href="img/logo.png">
	<link rel="stylesheet" href="static/css/style.css" type="text/css" media="all">
	<script type="text/javascript" src="static/js/jquery.min.js"></script>
	<script type="text/javascript" src="static/js/jquery.superslide.2.1.1.js"></script>
	<script src="js/jquery-1.11.1.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/global.js"></script>
</head>
<body>
	<div id="back-top"><a href="#gotop" onclick="scrollToTop();return false"></a></div>
	<!-- 头部 begin-->
	<div class="header" id="gotop">
		<div class="nav">
			<nav class="clearfix">
				<div class="navfl fl">
					<ul class="clearfix">
						<!-- <li><img src="img/hdrenwu.png" alt=""></li> -->
						<li><a class="active" href="index.html">首页</a></li>
						<li><a href="./t.html">微语</a></li>
						<li><a href="./photos.html">相册</a></li>
						<li><a href="./login.html">登陆</a></li>
					</ul>
				</div>
				<!-- 左边结束 -->
				<div class="navrt fr">
					<ul class="clearfix">
						<li><img src="img/hdrenwu.png" alt=""> <input type="text" placeholder="点击量top 10"><button onclick="test()"></button></li>
						<li><a href="#">吐槽板</a></li>
					</ul>
				</div>
			</nav>
		</div>
		<!-- 头像部分 -->
		<div class="tx">
			<div class="img">
				<a href="javascript:void(0);" title="名字+个人主页"></a>
			</div>
			<!-- 头像部分 -->
			<!-- 微语公告 -->
			<div class="wenzi">
				<h1>Miller's blog</h1>
				<div id="news">
					<ul>
						<li><img src="img/weiyu.png" width="20" alt="">&nbsp;<a href="#" title="公告第一条，这是一个分享公开源码和网络资源，学习交流web前端技术的博客。">公告第一条，这是一个分享公开源码和网络资源，学习交流web前端技术的博客。</a></li>
						<li><img src="img/weiyu.png" width="20" alt="">&nbsp;<a href="#" title="公告第二条，这是一个分享公开源码和网络资源，学习交流web前端技术的博客。">公告第一条，这是二个分享公开源码和网络资源，学习交流web前端技术的博客。</a></li>
						<li><img src="img/weiyu.png" width="20" alt="">&nbsp;<a href="#" title="公告第三条，这是一个分享公开源码和网络资源，学习交流web前端技术的博客。">公告第三条，这是一个分享公开源码和网络资源，学习交流web前端技术的博客。</a></li>
						<li><img src="img/weiyu.png" width="20" alt="">&nbsp;<a href="#" title="公告第四条，这是一个分享公开源码和网络资源，学习交流web前端技术的博客。">公告第四条，这是一个分享公开源码和网络资源，学习交流web前端技术的博客。</a></li>
						<li><img src="img/weiyu.png" width="20" alt="">&nbsp;<a href="#" title="公告第五条，这是一个分享公开源码和网络资源，学习交流web前端技术的博客。">公告第五条，这是一个分享公开源码和网络资源，学习交流web前端技术的博客。</a></li>
						<li><img src="img/weiyu.png" width="20" alt="">&nbsp;<a href="#" title="公告第六条，这是一个分享公开源码和网络资源，学习交流web前端技术的博客。">公告第六条，这是一个分享公开源码和网络资源，学习交流web前端技术的博客。</a></li>
						<li><img src="img/weiyu.png" width="20" alt="">&nbsp;<a href="#" title="公告第七条，这是一个分享公开源码和网络资源，学习交流web前端技术的博客。">公告第七条，这是一个分享公开源码和网络资源，学习交流web前端技术的博客。</a></li>
					</ul>
				</div>
			</div>
			<!-- 微语公告 -->
		</div>
	</div>	
	<!-- 头部 end -->

	<!-- 页面内容 begin -->
	<div class="content">
		<div class="container content-container">
			<div class="row rowliuyan">
				<div class="col-md-9 liuyanban">
					<div class="page-header">
						<h2><span class="glyphicon glyphicon-picture"></span>当前相册名称</h2>
						<div class="lyxx">
							<i class="glyphicon glyphicon-home"></i><a href="index.html">首页</a><span>&#187;</span><i class="glyphicon glyphicon-picture"></i><span>相册&#187;</span><i class="glyphicon glyphicon-time"></i><span>2018年3月1日下午</span>
						</div>
					</div>
					<!-- 相册显示部分 -->
					<div class="picturelists" id="piclists" style="text-align: center;width: 600px;height: 600px; margin: 0 auto;">
						<div class="picview">
							<div id="play">
								<ul class="img_ul">
									<li style="display:block;"><a class="img_a"><img src="./pictures/pic (1).jpg"></a></li>
									<li><a class="img_a"><img src="./pictures/pic (2).jpg" height="500"></a></li>
									<li><a class="img_a"><img src="./pictures/pic (3).jpg" height="500"></a></li>
									<li><a class="img_a"><img src="./pictures/pic (4).jpg" height="500"></a></li>
									<li><a class="img_a"><img src="./pictures/pic (5).jpg" height="500"></a></li>
									<li><a class="img_a"><img src="./pictures/pic (6).jpg" height="500"></a></li>
									<li><a class="img_a"><img src="./pictures/pic (7).jpg" height="500"></a></li>
									<li><a class="img_a"><img src="./pictures/pic (8).jpg" height="500"></a></li>
									<li><a class="img_a"><img src="./pictures/pic (9).jpg" height="500"></a></li>
									<li><a class="img_a"><img src="./pictures/pic (10).jpg" height="500"></a></li>
								</ul>
								<a href="javascript:void(0)" class="prev_a change_a" title="上一张"><span></span></a>
								<a href="javascript:void(0)" class="next_a change_a" title="下一张"><span style="display:block;"></span></a>
							</div>
							<div class="img_hd">
								<ul class="clearfix">
									<li><a class="img_a"><img src="./pictures/pic (1).jpg"></a></li>
									<li><a class="img_a"><img src="./pictures/pic (2).jpg"></a></li>
									<li><a class="img_a"><img src="./pictures/pic (3).jpg"></a></li>
									<li><a class="img_a"><img src="./pictures/pic (4).jpg"></a></li>
									<li><a class="img_a"><img src="./pictures/pic (5).jpg"></a></li>
									<li><a class="img_a"><img src="./pictures/pic (6).jpg"></a></li>
									<li><a class="img_a"><img src="./pictures/pic (7).jpg"></a></li>
									<li><a class="img_a"><img src="./pictures/pic (8).jpg"></a></li>
									<li><a class="img_a"><img src="./pictures/pic (9).jpg"></a></li>
									<li><a class="img_a"><img src="./pictures/pic (10).jpg"></a></li>
								</ul>
								<a class="bottom_a prev_a" style="opacity:0.7;"></a>
								<a class="bottom_a next_a" style="opacity:0.7;"></a>
							</div>
						</div>
					</div>
				</div>
				<!-- 侧栏 -->
				<div class="col-md-3">
					<div class="widget">
						<h4><span class="glyphicon glyphicon-map-marker"></span>欢迎来访！</h4>
						<div class="iptu"></div>
					</div>
					<div class="widget">
						<h4><span class="glyphicon glyphicon-tasks"></span>分类</h4>
						<ul class="clearfix">
							<li class="duogefl">
								<div>情感文章</div>
								(<a href="javascript:void(0);">心情日志</a>
								<a href="javascript:void(0);">杂记摘抄</a>)
							</li>
							<li class="duogefl">
								<div>技术相关</div>
								(<a href="javascript:void(0);">前端笔记</a>
								<a href="javascript:void(0);">后端技术</a>
								<a href="javascript:void(0);">全栈开发</a>)
							</li>
							<li class="dangefl">
								<div>软件工具</div>
								<div>网站源码</div>
							</li>
							<li class="dangefl">
								<div>影视资源</div>
								<div>音乐分享</div>
							</li>
							<li class="dangefl">
								<div>其他资源</div>
							</li>
						</ul>
					</div>
					<div class="widget">
						<h4><span class="glyphicon glyphicon-th-list"></span>存档</h4>
						<ul class="clearfix">
							<li class="cundang">
								<span class="glyphicon glyphicon-time"></span><div>2018年11月(1)</div>
							</li>
							<li class="cundang">
								<span class="glyphicon glyphicon-time"></span><div>2018年9月(3)</div>
							</li>
							<li class="cundang">
								<span class="glyphicon glyphicon-time"></span><div>2018年4月(2)</div>
							</li>

							<li class="cundang">
								<span class="glyphicon glyphicon-time"></span><div>2018年3月(6)</div>
							</li>
							<li class="cundang">
								<span class="glyphicon glyphicon-time"></span><div>2017年12月(7)</div>
							</li>
							<li class="cundang">
								<span class="glyphicon glyphicon-time"></span><div>2017年11月(7)</div>
							</li>
							<li class="cundang">
								<span class="glyphicon glyphicon-time"></span><div>2017年10月(5)</div>
							</li>
							<li class="cundang">
								<span class="glyphicon glyphicon-time"></span><div>2017年9月(3)</div>
							</li>
							<li class="cundang">
								<span class="glyphicon glyphicon-time"></span><div>2017年8月(6)</div>
							</li>
							<li class="cundang">
								<span class="glyphicon glyphicon-time"></span><div>2017年7月(2)</div>
							</li>
						</ul>
					</div>
					<div class="widget">
						<h4><span class="glyphicon glyphicon-pencil"></span>最新文章</h4>
						<ul class="clearfix hotwz">
							<li class="duogefl">
								<em class="hotone">1</em><a href="javascript:void(0);">你最爱的两家茶饮开杠了！奈雪の茶VS喜茶：隔空掐架，到底谁在“抄袭”？</a>
							</li>
							<li class="duogefl">
								<em class="hottwo">2</em><a href="javascript:void(0);">韩朝将组建联队参加2019年男子手球世锦赛</a>
							</li>
							<li class="duogefl">
								<em class="hotthree">3</em><a href="javascript:void(0);">被指广告数据造假市值跌去三分之一 猎豹移动：将起诉Kochava</a>
							</li>
						</ul>
					</div>
					<div class="widget">
						<h4><span class="glyphicon glyphicon-fire"></span>热门文章</h4>
						<ul class="clearfix hotwz">
							<li class="duogefl">
								<em class="hotone">1</em><a href="javascript:void(0);">你最爱的两家茶饮开杠了！奈雪の茶VS喜茶：隔空掐架，到底谁在“抄袭”？</a>
							</li>
							<li class="duogefl">
								<em class="hottwo">2</em><a href="javascript:void(0);">韩朝将组建联队参加2019年男子手球世锦赛</a>
							</li>
							<li class="duogefl">
								<em class="hotthree">3</em><a href="javascript:void(0);">被指广告数据造假市值跌去三分之一 猎豹移动：将起诉Kochava</a>
							</li>
							<li class="duogefl">
								<em class="hotSoSo">4</em><a href="javascript:void(0);">乌克兰为何冒险挑衅俄罗斯？俄方一针见血指出背后原因</a>
							</li>
							<li class="duogefl">
								<em class="hotSoSo">5</em><a href="javascript:void(0);">俄中学生2019年将首次参加国家统一考试汉语科目考试</a>
							</li>
							<li class="duogefl">
								<em class="hotSoSo">6</em><a href="javascript:void(0);">深圳南山半马乱象：选手集体抄近道，多个号码被套牌</a>
							</li>
						</ul>
					</div>
					<div class="widget">
						<h4><span class="glyphicon glyphicon-random"></span>随机文章</h4>
						<ul class="clearfix hotwz">
							<li class="duogefl">
								<em class="hotone">1</em><a href="javascript:void(0);">你最爱的两家茶饮开杠了！奈雪の茶VS喜茶：隔空掐架，到底谁在“抄袭”？</a>
							</li>
							<li class="duogefl">
								<em class="hottwo">2</em><a href="javascript:void(0);">韩朝将组建联队参加2019年男子手球世锦赛</a>
							</li>
							<li class="duogefl">
								<em class="hotthree">3</em><a href="javascript:void(0);">被指广告数据造假市值跌去三分之一 猎豹移动：将起诉Kochava</a>
							</li>
							<li class="duogefl">
								<em class="hotSoSo">4</em><a href="javascript:void(0);">乌克兰为何冒险挑衅俄罗斯？俄方一针见血指出背后原因</a>
							</li>
							<li class="duogefl">
								<em class="hotSoSo">5</em><a href="javascript:void(0);">俄中学生2019年将首次参加国家统一考试汉语科目考试</a>
							</li>
							<li class="duogefl">
								<em class="hotSoSo">6</em><a href="javascript:void(0);">深圳南山半马乱象：选手集体抄近道，多个号码被套牌</a>
							</li>
						</ul>
					</div>
					<div class="widget">
						<h4><span class="glyphicon glyphicon-link"></span>友情链接</h4>
						<ul class="link">
							<li><span class="glyphicon glyphicon-link"><a href="javascript:void(0);">百度百科</a>
							</li>
							<li><span class="glyphicon glyphicon-link"><a href="javascript:void(0);">百度知道</a>
							</li>
							<li><span class="glyphicon glyphicon-link"><a href="javascript:void(0);">百度文库</a>
							</li>
							<li><span class="glyphicon glyphicon-link"><a href="javascript:void(0);">虎牙直播</a>
							</li>
							<li><span class="glyphicon glyphicon-link"><a href="javascript:void(0);">熊猫直播</a>
							</li>
							<li><span class="glyphicon glyphicon-link"><a href="javascript:void(0);">今日焦点</a>
							</li>
							<li><span class="glyphicon glyphicon-link"><a href="javascript:void(0);">腾讯视频</a>
							</li>
							<li><span class="glyphicon glyphicon-link"><a href="javascript:void(0);">腾讯游戏</a>
							</li>
							<li><span class="glyphicon glyphicon-link"><a href="javascript:void(0);">中华文库</a>
							</li>
							<li><span class="glyphicon glyphicon-link"><a href="javascript:void(0);">苏宁易购</a>
							</li>
							<li><span class="glyphicon glyphicon-link"><a href="javascript:void(0);">新浪博客</a>
							</li>
							<li><span class="glyphicon glyphicon-link"><a href="javascript:void(0);">搜狐影音</a>
							</li>
							<li><span class="glyphicon glyphicon-link"><a href="javascript:void(0);">哔哩哔哩</a>
							</li>
						</ul>
					</div>
					<div class="widget">
						<h4><span class="glyphicon glyphicon-qrcode"></span>加群交流</h4>
						<div class="qrcode">
							<img src="./img/weixin.jpg" alt="" width="240" height="240">
						</div>
					</div>
					<div class="widget">
						<h4><span class="glyphicon glyphicon-signal"></span>站点统计</h4>
						<div class="zdtj">
							<p>微语数量：11条</p>
							<p>文章数量：225篇</p>
							<p>吐槽数量：572次</p>
							<p>勉强存活：287天</p>
							<p>诞生日期：2018年11月28号</p>
						</div>
					</div>
				</div>
				<!-- 侧栏 -->
			</div>
		</div>
	</div>
	<!-- 页面内容 end -->
	<!-- 底部 -->
	<footer class="footer">
		<div class="container">
			<p>文中出现的商标及图像版权属于其合法持有人，只供传递信息之用，非商务用途。互动交流时请遵守理性，宽容，换位思考的原则。</p>
			<p>基于HTML+CSS+JavaScript+Bootstrap3.3.7+jQuery1.11.1</p>
			<p>Copyright &copy; 2018-2018 By子成君</p>
		</div>
	</footer>
	<!-- 底部 -->
	<script type="text/javascript">

var i=0; //图片标识

var img_num=$(".img_ul").children("li").length; //图片个数

$(".img_ul li").hide(); //初始化图片	

play();

$(function(){

	$(".img_hd ul").css("width",($(".img_hd ul li").outerWidth(true))*img_num); //设置ul的长度



	$(".bottom_a").css("opacity",0.7);	//初始化底部a透明度

	//$("#play").css("height",$("#play .img_ul").height());

	if (!window.XMLHttpRequest) {//对ie6设置a的位置

		$(".change_a").css("height",$(".change_a").parent().height());

	}

	

	$(".change_a").focus(function(){

		this.blur();

	});

	$(".bottom_a").hover(function(){//底部a经过事件

		$(this).css("opacity",1);	

	},function(){

		$(this).css("opacity",0.7);	 

	});



	$(".change_a").hover(function(){//箭头显示事件

		$(this).children("span").show();

	},function(){

		$(this).children("span").hide();

	});

	

	$(".img_hd ul li").click(function(){

		i=$(this).index();

		play();

	});



	$(".prev_a").click(function(){

		//i+=img_num;

		i--;

		//i=i%img_num;

		i=(i<0?0:i);

		play();

	}); 

	$(".next_a").click(function(){

		i++;

		//i=i%img_num;

		i=(i>(img_num-1)?(img_num-1):i);

		play();

	}); 

}); 



function play(){//动画移动	

	var img=new Image(); //图片预加载

	img.onload=function(){

		img_load(img,$(".img_ul").children("li").eq(i).find("img"))

	};

	img.src=$(".img_ul").children("li").eq(i).find("img").attr("src");

	//$(".img_ul").children("li").eq(i).find("img").(img_load($(".img_ul").children("li").eq(i).find("img")));

	$(".img_hd ul").children("li").eq(i).addClass("on").siblings().removeClass("on");

	if(img_num>7){//大于7个的时候进行移动

		if(i<img_num-3){ //前3个

	$(".img_hd ul").animate({"marginLeft":(-($(".img_hd ul li").outerWidth()+4)*(i-3<0?0:(i-3)))});

		}else if(i>=img_num-3){//后3个

	$(".img_hd ul").animate({"marginLeft":(-($(".img_hd ul li").outerWidth()+4)*(img_num-7))});

}

}

	if(!window.XMLHttpRequest){//对ie6设置a的位置

	$(".change_a").css("height",$(".change_a").parent().height());

}

}



function img_load(img_id,now_imgid){//大图片加载设置 （img_id 新建的img,now_imgid当前图片）

	if(img_id.width/img_id.height>1){

		if(img_id.width >=$("#play").width())

			$(now_imgid).width($("#play").width());

		}else{

			if(img_id.height>=500) $(now_imgid).height(500);

		}

	$(".img_ul").children("li").eq(i).show().siblings("li").hide(); //大小确定后进行显示

}



function imgs_load(img_id){//小图片加载设置

	if(img_id.width >=$(".img_hd ul li").width()){img_id.width = 80};

	//if(img_id.height>=$(".img_hd ul li").height()) {img_id.height=$(".img_hd ul li").height();}

}

</script>
</body>
</html>